<template>
  <div class="main">
    <div class="outOneDiv">
      <Scroller lock-x>
        <div class="ssreWrap">
          <div class="top1">
            <!-- <go-back></go-back> -->
            <headerBack></headerBack>
            <div class="stepImage" style="width: 7.5rem;height: 1.2rem;">
              <img
                src="~/static/images/step1.png"
                style="width:auto;height: 1.2rem;display: block;margin: 0 auto;"
              />
            </div>
          </div>
          <div class="top2 scrollerOneDiv">
            <!-- <div class="warnText">
            <span>“目标批次”必须选择自己高考位次所在的批次,错误的批次将影响填报结果,且无法更改。</span>
            </div>-->
            <div class="chooseArea">
              <ul class="radio">
                <li @click="chooseRadio('1')">
                  <img class="imgIcon" src="~/static/images/search_icon_sure.png" v-if="choRadio" />
                  <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else />
                  <span class="text">理科</span>
                </li>
                <li @click="chooseRadio('2')">
                  <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-if="choRadio" />
                  <img class="imgIcon" src="~/static/images/search_icon_sure.png" v-else />
                  <span class="text">文科</span>
                </li>
              </ul>
              <div class="selectList">
                <div class="flex-h absBox">
                  <b class="bb1">考生省份</b>
                  <div class="flex1 xsp" @click="poves=true">
                    <span>{{value1[0]}}</span>
                    <img class="imgIcon poImg" src="~/static/images/collage_icon_arrow_right.png" />
                  </div>
                </div>
                <div class="flex-h absBox">
                  <b class="bb1">考生性别</b>
                  <div class="flex1 xsp" @click="sexes=true">
                    <span class="sspx">{{value2[0]}}</span>
                    <img class="imgIcon poImg" src="~/static/images/collage_icon_arrow_right.png" />
                  </div>
                </div>
                <div class="flex-h absBox">
                  <b class="bb1">目标批次</b>
                  <div class="flex1 xsp" @click="picies=true">
                    <span class="sspx">{{value3[0]}}</span>
                    <img class="imgIcon poImg" src="~/static/images/collage_icon_arrow_right.png" />
                  </div>
                </div>

                <div class="flex-h absBox" v-show="isRank==false">
                  <b class="bb1">考生分数</b>
                  <input
                    class="xsp flex1"
                    v-on:blur="commonJs.blurAdjust"
                    placeholder="请输入考生分数"
                    v-model="studentScore"
                    type="number"
                  />
                </div>
                <div class="flex-h absBox" v-show="isRank==true">
                  <b class="bb1">考生位次</b>
                  <input
                    class="xsp flex1"
                    v-on:blur="commonJs.blurAdjust"
                    placeholder="请输入考生位次"
                    v-model="studentOrder"
                    type="number"
                    oninput="if(value.length>6)value=value.slice(0,6)"
                  />
                </div>
                <div class="flex-h jiangsu" v-show="isJiang">
                  <b class="bb1">选测等级</b>
                  <span class="flex1 selectbox">
                    <div class="top1">
                      <b class="imgbox" @click="subsClick">
                        <i>{{subject}}</i>
                        <img class="sImg" src="~/static/icon/updown.png" alt />
                      </b>
                      <b class="imgbox" @click="otherClick">
                        <i>{{others}}</i>
                        <img class="sImg" src="~/static/icon/updown.png" alt />
                      </b>
                    </div>
                    <div class="top1 top2">
                      <b class="imgbox">
                        <i>{{disv==='理科'?'物理':'历史'}}</i>
                      </b>
                      <b class="imgbox">
                        <i>其他</i>
                      </b>
                    </div>
                  </span>
                </div>
              </div>
            </div>
            <div class="tipText">
              <div class="part_1">
                <div class="circleIcon"></div>
                <div class="text">“目标批次”必须选择自己高考位次所在的批次,错误的批次将影响填报结果,且无法更改。</div>
              </div>
              <div class="part_2">
                <div class="circleIcon"></div>
                <div class="text">
                  智能获取全省位次（功能即将上线）：
                  <br />
                  <a
                    href="https://wap.shengxue985.sx985.com/wx-yxk/#/info/infoDetail?type=1637&showComment=true"
                  >方式一：按照平时成绩与2019年高考一分一段表，对应换算出考生全省位次；</a>
                  <br />方式二：按照本校平时成绩排名与往年本校高考排名，对应换算出考生全省位次（需高中开通此功能）；
                </div>
              </div>
            </div>
          </div>
          <div class="top3" :style="commonJs.checkTerminal()==='ios'?'height: 2.2rem;':''">
            <div class="btnGroup">
              <button class="reset" @click="handleReset">重置</button>
              <button class="submit" @click="handleComfirm">下一步</button>
            </div>
          </div>
          <div style="height:1rem;"></div>
        </div>
      </Scroller>
    </div>
    <popup-picker
      @on-change="changes2"
      :data="sexList"
      v-model="value2"
      show-name
      :show.sync="sexes"
      :columns="1"
    ></popup-picker>
    <popup-picker
      :show.sync="picies"
      @on-change="changes3"
      :data="batchList"
      :columns="1"
      v-model="value3"
      show-name
    ></popup-picker>
    <popup-picker
      :show.sync="poves"
      @on-change="changes"
      @on-hide="onHide"
      :data="cityList"
      :columns="1"
      v-model="value1"
      show-name
    ></popup-picker>
    <actionsheet
      v-model="show7"
      :menus="menu"
      theme="android"
      @on-click-menu="ssclick"
      @on-after-hide="show7=false"
    ></actionsheet>
  </div>
</template>

<script>
import { PopupPicker, Confirm, Toast, Actionsheet, Scroller } from "vux";
import headerBack from "~/components/headerBack";
import ls from "store2";
import {
  verification,
  saveExaminee,
  getLevel,
  getProvince
} from "~/api/volunteer";
export default {
  components: {
    PopupPicker,
    Confirm,
    Toast,
    headerBack,
    Actionsheet,
    Scroller
  },
  data() {
    return {
      isRank: true,
      // isScore: false,
      menu: {},
      sub: {
        "6sub": "A+",
        "5sub": "A",
        "4sub": "B+",
        "3sub": "B",
        "2sub": "C",
        "1sub": "D"
      },
      other: {
        "6sub": "A+",
        "5sub": "A",
        "4sub": "B+",
        "3sub": "B",
        "2sub": "C",
        "1sub": "D"
      },
      others: "A+",
      otherScore: 6,
      show7: false,
      subject: "A+",
      subjectScore: 6,
      isJiang: false,
      sexes: false,
      picies: false,
      poves: false,
      xdalag: false,
      copus: "",
      cityList: [
        "云南",
        "四川",
        "安徽",
        "山东",
        "山西",
        "广东",
        "广西",
        "江苏",
        "江西",
        "河北",
        "河南",
        "湖北",
        "湖南",
        "甘肃",
        "福建",
        "贵州",
        "辽宁",
        "重庆",
        "陕西"
      ],
      value1: ["请选择"],
      sexList: ["男", "女"],
      value2: ["请选择"],
      batchList: [],
      value3: ["请选择"],
      studentScore: 0,
      studentOrder: "",
      btnDisabled: false,
      choRadio: true,
      show: false,
      disv: "理科",
      userType: null,
      conponData: [],

      spIndex: 0,
      volumes: "",
      ssr: true
    };
  },
  watch: {},
  created() {},
  mounted: function() {},
  methods: {
    subsClick() {
      this.show7 = true;
      this.menu = this.sub;
    },
    otherClick() {
      this.show7 = true;
      this.menu = this.other;
    },

    ssclick(key, value) {
      if (this.menu == this.sub) {
        this.subject = value;
        this.subjectScore = parseInt(key);
      } else {
        this.others = value;
        this.otherScore = parseInt(key);
      }
    },

    // closeDaliag() {
    //   let obj;
    //   if (this.isJiang == true) {
    //     obj = {
    //       division: this.disv,
    //       level: this.value3[0],
    //       precedence: this.studentOrder * 1,
    //       province: this.value1[0],
    //       score: this.studentScore * 1,
    //       sex: this.value2[0],
    //       userType: ls.get("yxkData").userType,
    //       subjects: this.subjectScore,
    //       other: this.otherScore
    //     };
    //   } else {
    //     obj = {
    //       division: this.disv,
    //       level: this.value3[0],
    //       precedence: this.studentOrder * 1,
    //       province: this.value1[0],
    //       score: this.studentScore * 1,
    //       sex: this.value2[0],
    //       userType: ls.get("yxkData").userType
    //     };
    //   }

    //   ls.set("stepOneData", obj);
    //   // ls.set("vounms", "0");

    //   setTimeout(() => {
    //     this.commonJs.gosto("stepTwo", this.userType);
    //   }, 50);
    // },
    chooseRadio(type) {
      type === "1" ? (this.choRadio = true) : (this.choRadio = false);
      type === "1" ? (this.disv = "理科") : (this.disv = "文科");
    },
    changes(e) {
      this.value1 = e;
      console.log("this.value1", this.value1);
      if (e[0] === "江苏") {
        this.isJiang = true;
      } else {
        this.isJiang = false;
      }
    },
    changes2(e) {
      this.value2 = e;
    },
    changes3(e) {
      this.value3 = e;
    },
    onHide(type) {
      if (type == true) {
        this.getPiCi(this.value1[0]);
        this.value3[0] = "请选择";
      }
    },
    getPiCi(pro) {
      getLevel(pro)
        .then(res => {
          if (res.code === "0") {
            let ary = [];
            res.data.forEach(item => {
              if (
                item.indexOf("专") == -1 &&
                item.indexOf("三") == -1 &&
                item.indexOf("四") == -1
              ) {
                ary.push(item);
              }
            });
            this.batchList = ary;
          }
        })
        .catch(() => {
          this.$vux.toast.text("网络错误，请稍后再试！");
        });
    },
    getCascadeArea() {
      getProvince()
        .then(res => {
          if (res.code === "0") {
            let areaData = res.data;
            let arrArea = [];
            areaData.forEach((item, index) => {
              arrArea.push(item);
            });
            this.cityList = arrArea;
            this.$vux.loading.hide();
          }
        })
        .catch(() => {
          this.$vux.toast.text("网络错误，请稍后再试！");
        });
    },
    subInfo() {
      let obj;
      if (this.isJiang == true) {
        obj = {
          division: this.disv,
          level: this.value3[0],
          precedence: this.studentOrder * 1,
          province: this.value1[0],
          score: this.studentScore * 1,
          sex: this.value2[0],
          userType: ls.get("yxkData").userType,
          // "volume": voms,
          subjects: this.subjectScore,
          other: this.otherScore
        };
      } else {
        obj = {
          division: this.disv,
          level: this.value3[0],
          precedence: this.studentOrder * 1,
          province: this.value1[0],
          score: this.studentScore * 1,
          sex: this.value2[0],
          userType: ls.get("yxkData").userType
          // "volume": voms
        };
      }
      saveExaminee(obj)
        .then(res => {
          if (res.code === "0") {
            this.$vux.toast.text("保存信息成功");
            //核销完会把卡劵和用户第一步信息进行绑定，绑定之后才可以获取全部balance结果，付款核销步骤完成

            ls.set("stepOneData", obj);
            setTimeout(() => {
              this.commonJs.gosto("stepTwo", ls.get("yxkData").userType);
            }, 50);
          }
          if (res.code === "400") {
            this.$vux.toast.text(res.message);
          }
        })
        .catch(() => {
          this.$vux.toast.text("网络错误，请稍后再试！");
        });
      // }
    },
    handleReset() {
      this.studentScore = "";
      this.studentOrder = "";
      this.value1 = ["请选择"];
      this.value2 = ["请选择"];
      this.value3 = ["请选择"];
    },
    handleComfirm() {
      // 正式版判定
      if (this.value1.length == 0 || this.value1[0] == "请选择") {
        this.$vux.toast.text("请选择您的考试省份");
      } else if (this.value2.length === 0 || this.value2[0] === "请选择") {
        this.$vux.toast.text("请选择您的性别");
      } else if (this.value3.length == 0 || this.value3[0] == "请选择") {
        this.$vux.toast.text("请选择您的目标批次");
      } else if (this.studentScore === "") {
        this.$vux.toast.text("考生分数未输入，请输入后进行下一步");
      } else if (this.studentOrder === "") {
        this.$vux.toast.text("考生位次未输入，请输入后进行下一步");
      } else {
        this.subInfo(); //不带卡券
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.weui-actionsheet__menu {
  /deep/.weui-actionsheet__cell {
    text-align: center;
  }
}
.ssreWrap {
  width: 7.5rem;
  height: auto;
  background: #fff;
  // flex-direction: column;
  // overflow: hidden;
  // align-items: initial;
  // justify-content: initial !important;
}

.outOneDiv {
  width: 100%;
  height: auto;
  background: #fff;

  .scrollerOneDiv {
    padding: 0 0.3rem;
    width: 100%;
    .warnText {
      width: 100%;
      height: auto;
      background: #fff7d4;
      margin-top: 0.2rem;
      padding: 0.1rem 0.3rem;
      box-sizing: border-box;

      span {
        font-size: 0.22rem;
        color: #222;
        line-height: 0.3rem;
      }
    }

    .chooseArea {
      margin-top: 0.21rem;
      width: 100%;
      height: auto;
      box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);
      border-radius: 0.1rem;
      position: relative;
      margin-bottom: 0.4rem;

      .gaizi {
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgba(0, 0, 0, 0.2);
        z-index: 100;
      }

      .radio {
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        padding: 0.61rem 1.59rem 0.4rem 1.58rem;

        li {
          display: flex;
          align-items: center;

          .text {
            margin-left: 0.2rem;
            font-size: 0.36rem;
            color: #222;
            font-weight: bold;
          }
        }
      }

      .selectList {
        padding: 0 0.3rem;
        flex: 1;
        box-sizing: border-box;

        .absBox {
          width: 6.3rem;
          height: 0.9rem;
          line-height: 0.9rem;

          .bb1 {
            color: #222222;
            font-size: 0.3rem;
            font-weight: bold;
            letter-spacing: 0.02rem;
          }

          .xsp {
            text-align: right;
            height: 0.8rem;
            line-height: 0.8rem;
            font-size: 0.3rem;
            font-weight: bold;
            border: none;
            padding-right: 0.5rem;
            color: #222;
            box-sizing: border-box;
            outline: none;
            position: relative;

            span {
              font-size: 0.3rem;
              font-weight: bold;
              color: #222;
            }

            .poImg {
              position: absolute;
              right: 0;
              top: 0.2rem;
            }
          }
        }

        .jiangsu {
          height: 1.2rem;

          width: 6.3rem;

          .bb1 {
            color: #222222;
            font-size: 0.3rem;
            font-weight: bold;
            letter-spacing: 0.02rem;
          }

          .selectbox {
            .top1 {
              width: 100%;
              height: 0.6rem;
              text-align: right;
              font-size: 0.3rem;
              font-weight: bold;
            }

            .imgbox {
              text-align: center;
              display: inline-block;
              width: 1.6rem;
              height: 0.6rem;
              border: 1px solid #eee;
              border-radius: 0.1rem;
              line-height: 0.6rem;
              margin-right: 0.2rem;

              .sImg {
                display: inline-block;
                width: 0.2rem;
                height: 0.2rem;
              }

              i {
                font-size: 0.3rem;
                font-weight: bold;
              }
            }

            .top2 {
              .imgbox {
                border: none;
              }
            }
          }
        }
      }
    }

    .tipText {
      padding: 0.24rem;
      background: #fafafc;
      border-radius: 8px;
      .part_1,
      .part_2 {
        display: flex;
        justify-content: flex-start;
        .circleIcon {
          display: inline-block;
          width: 0.1rem;
          height: 0.1rem;
          border-radius: 50%;
          background: #d8d8d8;
          margin-right: 0.16rem;
          margin-top: 0.1rem;
        }
        .text {
          width: 6.12rem;
          color: #999;
          font-size: 0.24rem;
          line-height: 0.33rem;
        }
      }
      .part_1 {
        margin-bottom: 0.4rem;
      }
    }
  }
}

.imgIcon {
  width: 0.4rem;
  height: 0.4rem;
}

.top3 {
  width: 100%;
  height: 1.2rem;
  padding: 0 0.3rem;
  margin-top: 1rem;
}

.top2 {
  // flex: 1;
}

.btnGroup {
  // margin-top: 2.32rem;
  display: flex;
  justify-content: space-between;

  button {
    width: 3.35rem;
    height: 0.9rem;
    border-radius: 0.1rem;
    letter-spacing: 0.05rem;
    font-size: 0.36rem;
    font-weight: bold;
  }

  .reset {
    border: 1px solid #eee;
    background: #fff;
    color: #999;
  }

  .submit {
    border: none;
    background: @mainColor;
    color: #fff;
  }
}
</style>
